<template>
  <div>
    <a-form-item label="模板选择">
      <a-select v-model:value="templateId"
                showSearch
                optionFilterProp="name"
                :style="{ width: '300px' }"
                @change="handleChange">
        placeholder="请选择模板">
        <a-select-option :value="0">请选择模板</a-select-option>
        <a-select-option v-for="item in templates"
                         :key="item.id"
                         :value="item.id"
                         :name="item.name">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
      <template v-for="(item, index) in fields">
        <a-form-item :label="item.name"
                     :name="['date-' + index]"
                     v-if="item.field_type === 'date'">
          <a-date-picker v-model:value="model[index].value"
                         :name="'date-' + index"
                         placeholder="请选择日期"
                         valueFormat="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :style="width.xl" />
        </a-form-item>
        <a-form-item :label="item.name"
                     :name="'datetime-' + index"
                     v-else-if="item.field_type === 'datetime'">
          <a-date-picker v-model:value="model[index].value"
                         valueFormat="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :name="'datetime-' + index"
                         show-time
                         :style="width.xl" />
        </a-form-item>
        <a-form-item :label="item.name"
                     :name="'textarea-' + index"
                     v-else-if="item.field_type === 'textarea'">
          <a-textarea v-model:value="model[index].value"
                      :name="'textarea-' + index"
                      placeholder="请输入内容" />
        </a-form-item>
        <a-form-item :label="item.name"
                     :name="'number-' + index"
                     v-else-if="item.field_type === 'number'">
          <a-input-number v-model:value="model[index].value"
                          :style="width.lg"
                          :name="'number-' + index"
                          placeholder="请输入内容" />
        </a-form-item>
        <a-form-item :label="item.name"
                     :name="'select-' + index"
                     v-else-if="item.field_type === 'select'">
          <a-select v-model:value="model[index].value"
                    :name="'select-' + index"
                    placeholder="请选择"
                    :style="width.xxl">
            <a-select-option v-for="(option, index) in item.value"
                             :key="index"
                             :value="option">
              {{ option }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="item.name"
                     :name="'radio-' + index"
                     v-else-if="item.field_type === 'radio'">
          <a-radio-group v-model:value="model[index].value" :name="'radio-' + index">
            <a-radio v-for="(option, index) in item.value"
                     :key="index"
                     :value="option">
              {{ option }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label="item.name"
                     :name="'checkbox-' + index"
                     v-else-if="item.field_type === 'checkbox'">
          <a-checkbox-group v-model:value="model[index].value" :name="'checkbox-' + index">
            <a-checkbox v-for="(option, index) in item.value"
                        :key="index"
                        :value="option">
              {{ option }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item :label="item.name" :name="'input-' + index" v-else>
          <a-input v-model:value="model[index].value"
                  :show-count="item.show_count ? true : false"
                  :name="'input-' + index"
                  placeholder="请输入内容" />
        </a-form-item>
      </template>
  </div>
</template>

<script setup lang="ts">
// 导入全局配置中的宽度设置
import { width } from '@/config';
// 导入获取模板列表的接口函数
import { getTemplateList } from '@/server/modules/templates';
// 导入 Vue 的生命周期钩子和响应式引用
import { onMounted,ref } from 'vue'

// 定义模板列表的响应式引用，类型为 TemplateType 数组
const templates = ref<TemplateType[]>([])
// 定义当前选中模板的响应式引用，类型为 TemplateType
const template = ref<TemplateType>()
//存储原有模板id值
const templateIdOld = ref<number>(0)
// 定义组件的 model 值，用于和父组件双向绑定表单字段状态，默认值为空数组
const model = defineModel<StateFieldsType[]>('value',{default:[]})
// 存储原有value值
const modelOld = ref<StateFieldsType[]>([])
// 定义组件的模板 ID，用于和父组件双向绑定当前选中的模板 ID，默认值为 0
const templateId = defineModel<number>('id',{default:0})//
// 定义组件的表单字段列表，用于和父组件双向绑定当前模板的字段列表，默认值为空数组
const fields = defineModel<FieldsType[]>('fields',{default:[]})

/**
 * 处理模板选择变化的事件
 * @param value - 当前选中的模板 ID
 */
const handleChange = (value: number) => {
  // 若选择的是“请选择模板”（ID 为 0），清空当前选中模板、表单字段状态和字段列表
  if (value === 0) {
    template.value = undefined
    model.value = []
    fields.value = []
    return
  }
  // 若选择了有效模板 ID 且模板列表不为空
  if (value && templates.value.length > 0) {
    // 找到对应的模板对象
    template.value = templates.value.find(item => item.id === value);
    
    // 若找到模板对象且该模板有完整字段信息
    if (template.value && template.value.full_fields) {
     
      // 更新当前选中的模板 ID
      templateId.value = template.value.id
      fields.value = template.value.full_fields
      // 如果是创建模式，初始化表单字段状态
      if(value !== templateIdOld.value){
         // 更新表单字段列表
        const result: StateFieldsType[] = []
        let _value: any;
        // 遍历模板的完整字段列表
        template.value.full_fields.forEach(field => {
          // 根据字段类型初始化默认值
          if (field.field_type === 'date' || field.field_type === 'datetime') {
            _value = null
          } else if (field.field_type === 'checkbox') {
            _value = []
          } else {
            _value = field.field_type === 'number' ? 0 : ''
          }
          // 将初始化后的字段信息添加到结果数组中
          result.push({
            id: field.id,
            label: field.name,
            value: _value
          })
        });
        // 更新表单字段状态
        model.value = result
      }else{
        if(modelOld.value.length){
          model.value = modelOld.value
        }  
      }
    }
  }
}

/**
 * 获取模板列表数据
 */
const getData = async () => {
  // 调用接口获取模板列表
  const res = await getTemplateList()
  // 若接口返回成功
  if (res.code === 200) {
    // 更新模板列表
    templates.value = res.data
  }
}

// 组件挂载完成后执行
onMounted( async() => {
  // 获取模板列表数据
  await getData()
  // 若已有选中的模板 ID，触发模板选择变化处理函数
  if(templateId.value){
    templateIdOld.value = templateId.value
  }
  if(model.value){
    modelOld.value = model.value
  }
})

</script>

<style scoped></style>